﻿
@{
    ViewBag.Title = "VedioUpLoad";
    Layout = "~/Views/Shared/_BCLayout.cshtml";

}
@section head{
    <script type="text/javascript" charset="utf-8" src="~/Content/ueditor/utf8_net/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/Content/ueditor/utf8_net/ueditor.all.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/Content/ueditor/utf8_net/lang/zh-cn/zh-cn.js"></script>
}

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>新增视频</legend>
</fieldset>
<div style="display:none;">
    <script id="editorUpLoad" type="text/plain" style="width:1024px;height:500px;">
    </script>
</div>
<div>
    <form class="layui-form" action="" lay-filter="test1" id="AuthorData">
        <div class="layui-form-item">
            <label class="layui-form-label">视频名字</label>
            <div class="layui-input-block">
                <input type="text" name="Title" required lay-verify="required" placeholder="请输入视频名字" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频</label>
            <div class="layui-input-block">
                <input type="text" name="VideoUrl" required lay-verify="required" readonly placeholder="请在右边选择视频" class="layui-input" style="width:500px;float:left;">
                <button type="button" class="layui-btn layui-btn-normal" style="float:left;" onclick="videoup()">视频选择</button>
                <button type="button" class="layui-btn" id="CheckVideo">查看视频</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <input type="text" id="IdImgUrl" name="ImageUrl" required lay-verify="required" readonly placeholder="请在右边选择图片" class="layui-input" style="width:500px;float:left;">
                <button type="button" class="layui-btn layui-btn-normal" style="float:left;" onclick="imgup()">图片选择</button>
                <button type="button" class="layui-btn" id="CheckImg">查看图片</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">字幕文件（Vtt）</label>
            <div class="layui-input-block">
                <input type="text" id="IdImgUrl" name="VttUrl"  readonly placeholder="请在右边选择图片" class="layui-input" style="width:500px;float:left;">
                <button type="button" class="layui-btn layui-btn-normal" style="float:left;" onclick="VttUp()">字幕选择</button>                
            </div>
        </div>

        <button type="submit" id="mysubmit" class="layui-btn" lay-submit lay-filter="formVerify" style="display:none;">立即提交</button>

    </form>
</div>
<div class="layui-form-item" style="margin-top:20px;">
    <div class="layui-input-block">
        <button type="button" class="layui-btn" onclick="formfunc()">立即提交</button>
    </div>
</div>

<script type="text/javascript">
    var img = null;
    var IsValidate = 0;
    var tab = parent.tab;

    layui.use(['form', 'laydate', 'layedit', 'layer'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var layedit = layui.layedit;

        //监听提交
        form.on('submit(formVerify)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            IsValidate = 1;
            return false;
        });

        laydate.render({
            elem: '#TimePick'
            , type: 'datetime'
        });


        $('#CheckImg').on('click', function () {
            var ImgUrl = "";
            ImgUrl = $("#Id_ImgUrl").val();
            layer.open({
                type: 1
                , title: false //不显示标题栏
                , closeBtn: 1
                , area: '800px;'
                , shade: 0.8
                , id: 'LAY_layuipro111' //设定一个id，防止重复弹出
                //, btn: ['火速围观', '残忍拒绝']
                , btnAlign: 'c'
                //, moveType: 1 //拖拽模式，0或者1
                , content: '<div style="padding: 10px; line-height: 12px; background-color: #393D49; color: #fff; font-weight: 300;">\
                            <img style="height:500px;" src="' + ImgUrl + '"  alt="上传的封面图片" />\
                            </div> '

            });
        });

        $('#CheckVideo').on('click', function () {
            var videoUrl = "";
            videoUrl = $("input[name='VideoUrl']").val();
            layer.open({
                type: 1
                , title: false //不显示标题栏
                , closeBtn: 1
                , area: '800px;'
                , shade: 0.8
                , id: 'LAY_layuipro222' //设定一个id，防止重复弹出
                //, btn: ['火速围观', '残忍拒绝']
                , btnAlign: 'c'
                //, moveType: 1 //拖拽模式，0或者1
                , content: '<div style="padding: 10px; line-height: 12px; background-color: #393D49; color: #fff; font-weight: 300;">\
                            <video src="'+ videoUrl + '" style="height:400px;" controls="controls">您的浏览器不支持 video 标签。</video>\
                            </div> '

            });
        });



    });

    //注册UE上传组件
    var uploadEditor = UE.getEditor("editorUpLoad", {
        isShow: false,
        focus: false,
        enableAutoSave: false,
        autoSyncData: false,
        autoFloatEnabled: false,
        wordCount: false,
        sourceEditor: null,
        scaleEnabled: true,
        toolbars: [["insertimage", "attachment", "insertvideo"]]
    });

    // 监听多图上传和上传附件组件的插入动作
    uploadEditor.ready(function () {
        uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
        //uploadEditor.addListener("")
        uploadEditor.addListener("afterUpVideo", _afterUpVideo);
        uploadEditor.addListener("afterUpfile", _afterUpfile);
    });

    function _afterUpVideo(t, result) {

        var tempurl = '';
        tempurl = result.url;
        $("input[name='VideoUrl']").val(tempurl);
    }

    //监听后对应的函数
    function _beforeInsertImage(t, result) {
        var imageHtml = '';
        imageHtml = result[0].src;
        $("input[name='ImageUrl']").val(imageHtml);

    }

    function _afterUpfile(t, result) {
        var fileUrl = '';
        fileUrl = result[0].url;
        $("input[name='VttUrl']").val(fileUrl);
    }

    function videoup() {
        var dialog = uploadEditor.getDialog("insertvideo");
        dialog.title = '视频上传';
        dialog.render();
        dialog.open();
    }


    //调起上传头像的函数
    function imgup() {
        var dialog = uploadEditor.getDialog("insertimage");
        dialog.title = '图片上传';
        dialog.render();
        dialog.open();
    }

    function VttUp() {
        var dialog = uploadEditor.getDialog("attachment");
        dialog.title = '字幕上传';
        dialog.render();
        dialog.open();
    }


    function formfunc() {
        IsValidate = 0;
        $("#mysubmit").click();
        if (IsValidate == 1) {
            IsValidate = 0;
            //alert("表单验证通过");
            var obj = $("#AuthorData").serializeArray();
            var data = {};
            $.each(obj, function (i, v) {
                data[v.name] = v.value;
            });

            $.ajax({
                type: "POST",
                url: "/Home/API_VedioUpLoad",
                async: false,
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (msg) {
                    if (msg.result == "OK") {
                        alert("Ok");
                        parent.layui.admin.events.closeThisTabs();
                    } else {
                        alert("新增失败");
                    }
                }
            });

        } else {
            return;
        }

    }

    function LoadImage(imgSrc, callback) {
        var image = new Image();
        image.src = imgSrc;
        if (image.complete) {
            callback(image);
            image.onload = function () { };
        } else {
            image.onload = function () {
                callback(image);
                // clear onLoad, IE behaves irratically with animated gifs otherwise
                image.onload = function () { };
            }
            image.onerror = function () {
                alert("Could not load image.");
            }
        }
    }
    //设置图片尺寸的回调
    function SetImgSizeInfo(image) {
        $("input[name='PicSize']").val(image.width + "×" + image.height);

    }





</script>
